<template>
  <el-row :gutter="2">

    <el-col :span="6">
      <Card>
        <template #header>
          <div>{{ MockStore.MackObj['//1'] }}</div>
        </template>
        <template #number>
          <div>{{ MockStore.MackObj.salesToday }}</div>
        </template>
        <template #charts>
          <div style="display: flex; align-items: center; color: yellowgreen;">日同比:{{ MockStore.MackObj.salesGrowthLastDay
          }}
            <svg t="1702519172311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="3192" width="32" height="32">
              <path
                d="M816.2 501.5c-17.1-12.9-38.5-12.9-51.4 0-12.9 12.8-12.9 34.3 0 51.4 12.8 12.9 34.3 12.9 51.4 0 12.9-17.1 12.9-38.5 0-51.4z"
                fill="#1afa29" p-id="3193"></path>
              <path
                d="M757.7 560l-0.5-0.5-0.4-0.6c-15.8-21.1-15.4-48.2 0.9-64.5 16.3-16.3 43.5-16.7 64.5-0.9l0.6 0.4 0.5 0.5c16.3 16.3 16.7 43.5 0.9 64.5l-0.9 1.1-1.1 0.9c-10.3 7.7-22.1 11.6-33.3 11.6-11.7 0-22.8-4.2-31.2-12.5z m51.9-50.8c-12.9-9.3-28.6-9.6-37.7-0.5-9.1 9-8.8 24.8 0.5 37.7 9 8.4 24.1 8.2 36.7-0.6 8.7-12.6 9-27.7 0.5-36.6z"
                fill="#1afa29" p-id="3194"></path>
              <path
                d="M628.4 325.5c-17.1-12.9-38.5-12.9-51.4 0-12.9 12.8-12.9 34.3 0 51.4 12.8 12.9 34.3 12.9 51.4 0 12.9-17.2 12.9-38.6 0-51.4z"
                fill="#1afa29" p-id="3195"></path>
              <path
                d="M570 384l-0.5-0.5-0.4-0.6c-15.8-21.1-15.4-48.2 0.9-64.5s43.5-16.7 64.5-0.9l0.6 0.4 0.5 0.5c16.3 16.3 16.7 43.5 0.9 64.5l-0.9 1.1-1.2 0.8c-10.3 7.7-22.1 11.6-33.3 11.6-11.7 0-22.8-4.1-31.1-12.4z m51.8-50.9c-12.9-9.3-28.6-9.6-37.7-0.5-9.1 9-8.8 24.8 0.5 37.7 9 8.4 24.1 8.2 36.7-0.6 8.7-12.6 9-27.7 0.5-36.6z"
                fill="#1afa29" p-id="3196"></path>
              <path d="M732.7 662.2h96.4v115.7h-96.4z" fill="#1afa29" p-id="3197"></path>
              <path d="M722.7 652.2h116.4v135.7H722.7V652.2z m96.4 20h-76.4v95.7h76.4v-95.7z" fill="#1afa29" p-id="3198">
              </path>
              <path d="M539.9 469.4h96.4v308.5h-96.4z" fill="#1afa29" p-id="3199"></path>
              <path d="M529.9 787.9V459.4h116.4v328.5H529.9z m96.4-308.5h-76.4v288.5h76.4V479.4z" fill="#1afa29"
                p-id="3200"></path>
              <path d="M366.4 565.8h96.4v212.1h-96.4z" fill="#1afa29" p-id="3201"></path>
              <path d="M356.4 555.8h116.4v232.1H356.4V555.8z m96.4 20h-76.4v192.1h76.4V575.8z" fill="#1afa29" p-id="3202">
              </path>
              <path d="M173.6 334.4H270v443.4h-96.4z" fill="#1afa29" p-id="3203"></path>
              <path d="M163.6 324.4H280v463.5H163.6V324.4z m96.4 20h-76.4v423.5H260V344.4z" fill="#1afa29" p-id="3204">
              </path>
              <path d="M135 767.9h732.6v20H135z" fill="#1afa29" p-id="3205"></path>
              <path
                d="M430.6 405.1c-17.1-12.9-38.5-12.9-51.4 0-12.9 12.8-12.9 34.3 0 51.4 12.8 12.9 34.3 12.9 51.4 0 12.9-17.1 12.9-38.5 0-51.4z"
                fill="#1afa29" p-id="3206"></path>
              <path
                d="M372.1 463.6l-0.5-0.5-0.4-0.6c-15.8-21.1-15.4-48.2 0.9-64.5s43.5-16.7 64.5-0.9l0.6 0.4 0.5 0.5c16.3 16.3 16.7 43.5 0.9 64.5l-0.9 1.1-1.1 0.9c-10.3 7.7-22.1 11.6-33.3 11.6-11.7 0-22.8-4.2-31.2-12.5z m51.9-50.8c-12.9-9.3-28.6-9.6-37.7-0.5-9.1 9-8.8 24.8 0.5 37.7 9 8.4 24.1 8.2 36.7-0.6 8.7-12.6 9-27.7 0.5-36.6z"
                fill="#1afa29" p-id="3207"></path>
              <path
                d="M237.8 193c-17.1-12.9-38.5-12.9-51.4 0-12.9 12.8-12.9 34.3 0 51.4 12.8 12.9 34.3 12.9 51.4 0 12.9-17.1 12.9-38.5 0-51.4z"
                fill="#1afa29" p-id="3208"></path>
              <path
                d="M179.3 251.5l-0.5-0.5-0.4-0.6c-15.8-21.1-15.4-48.2 0.9-64.5s43.5-16.7 64.5-0.9l0.6 0.4 0.5 0.5c16.3 16.3 16.7 43.5 0.9 64.5l-0.9 1.1-1.1 0.9c-10.3 7.7-22.1 11.6-33.3 11.6-11.7 0-22.8-4.2-31.2-12.5z m51.9-50.8c-12.9-9.3-28.6-9.6-37.7-0.5-9.1 9-8.8 24.8 0.5 37.7 9 8.4 24.1 8.2 36.7-0.6 8.7-12.6 9-27.7 0.5-36.6z"
                fill="#1afa29" p-id="3209"></path>
              <path d="M439.023 402.546l115.646-57.823 8.944 17.888-115.646 57.823z" fill="#1afa29" p-id="3210"></path>
              <path d="M744 501.9l16 12z" fill="#1afa29" p-id="3211"></path>
              <path d="M628.68 379.493l15.185-13.016 115.647 134.928-15.186 13.016z" fill="#1afa29" p-id="3212"></path>
              <path d="M235.153 242.253l15.788-12.278 134.935 173.51-15.788 12.278z" fill="#1afa29" p-id="3213"></path>
            </svg>
          </div>
          <div style="display: flex; align-items: center; color: yellowgreen;">月同比:{{
            MockStore.MackObj.salesGrowthLastMonth
          }} <svg t="1702519228380" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="4497" width="32" height="32">
              <path
                d="M186.4 552.9c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.9-12.9 34.3 0 51.4z"
                fill="#d81e06" p-id="4498"></path>
              <path
                d="M213.7 572.5c-11.2 0-23-3.9-33.3-11.6l-1.1-0.9-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.4 8.3-19.5 12.5-31.2 12.5z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z"
                fill="#d81e06" p-id="4499"></path>
              <path
                d="M374.2 376.9c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.8-12.9 34.2 0 51.4z"
                fill="#d81e06" p-id="4500"></path>
              <path
                d="M401.5 396.4c-11.2 0-23-3.9-33.3-11.6l-1.2-0.8-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.3 8.3-19.4 12.4-31.1 12.4z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z"
                fill="#d81e06" p-id="4501"></path>
              <path d="M173.5 662.2h96.4v115.7h-96.4z" fill="#d81e06" p-id="4502"></path>
              <path d="M279.9 787.9H163.5V652.2h116.4v135.7z m-96.4-20h76.4v-95.7h-76.4v95.7z" fill="#d81e06" p-id="4503">
              </path>
              <path d="M366.3 469.4h96.4v308.5h-96.4z" fill="#d81e06" p-id="4504"></path>
              <path d="M472.7 787.9H356.3V459.4h116.4v328.5z m-96.4-20h76.4V479.4h-76.4v288.5z" fill="#d81e06"
                p-id="4505"></path>
              <path d="M539.8 565.8h96.4v212.1h-96.4z" fill="#d81e06" p-id="4506"></path>
              <path d="M646.2 787.9H529.8V555.8h116.4v232.1z m-96.4-20h76.4V575.8h-76.4v192.1z" fill="#d81e06"
                p-id="4507"></path>
              <path d="M732.6 334.4H829v443.4h-96.4z" fill="#d81e06" p-id="4508"></path>
              <path d="M839 787.9H722.6V324.4H839v463.5z m-96.4-20H819V344.4h-76.4v423.5z" fill="#d81e06" p-id="4509">
              </path>
              <path d="M867.6 777.9H135" fill="#d81e06" p-id="4510"></path>
              <path d="M135 767.9h732.6v20H135z" fill="#d81e06" p-id="4511"></path>
              <path
                d="M572 456.5c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.9-12.9 34.3 0 51.4z"
                fill="#d81e06" p-id="4512"></path>
              <path
                d="M599.3 476.1c-11.2 0-23-3.9-33.3-11.6l-1.1-0.9-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.4 8.3-19.5 12.5-31.2 12.5z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z"
                fill="#d81e06" p-id="4513"></path>
              <path
                d="M764.8 244.4c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.9-12.9 34.3 0 51.4z"
                fill="#d81e06" p-id="4514"></path>
              <path
                d="M792.1 264c-11.2 0-23-3.9-33.3-11.6l-1.1-0.9-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.4 8.3-19.5 12.5-31.2 12.5z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z"
                fill="#d81e06" p-id="4515"></path>
              <path d="M790.5 218.7" fill="#d81e06" p-id="4516"></path>
              <path d="M443.4 353.7l115.7 57.8" fill="#d81e06" p-id="4517"></path>
              <path d="M439 362.652l8.945-17.888 115.645 57.823-8.944 17.888z" fill="#d81e06" p-id="4518"></path>
              <path d="M250.6 507.9" fill="#d81e06" p-id="4519"></path>
              <path d="M242.6 513.9l16-12z" fill="#d81e06" p-id="4520"></path>
              <path d="M250.6 507.9L366.3 373" fill="#d81e06" p-id="4521"></path>
              <path d="M243.097 501.455l115.647-134.927 15.186 13.016L258.283 514.47z" fill="#d81e06" p-id="4522">
              </path>
              <path d="M624.7 409.6l134.9-173.5" fill="#d81e06" p-id="4523"></path>
              <path d="M616.78 403.487l134.935-173.51 15.788 12.278-134.935 173.51z" fill="#d81e06" p-id="4524"></path>
            </svg></div>
        </template>
        <template #tip>
          <div>昨日销售额:{{ MockStore.MackObj.salesLastDay }}</div>
        </template>
      </Card>

      <!-- 图表 -->
    </el-col>

    <el-col :span="6">
      <Card>
        <template #header>
          <div>{{ MockStore.MackObj['//2'] }}</div>
        </template>
        <template #number>
          {{ MockStore.MackObj.orderToday }}
        </template>
        <template #charts>
          <Line></Line>
        </template>
        <template #tip>
          <div>昨日订单{{ MockStore.MackObj.orderLastDay }}</div>
        </template>
      </Card>
    </el-col>
    <!-- 图表2 -->
    <el-col :span="6">
      <Card>
        <template #header>
          <div>{{ MockStore.MackObj['//3'] }}</div>
        </template>
        <template #number>
          <div>{{ MockStore.MackObj.orderUser }}</div>
        </template>
        <template #charts>
          <Bar></Bar>
        </template>
        <template #tip>
          <div>退货率:{{ MockStore.MackObj.returnRate }}</div>
        </template>
      </Card>
    </el-col>

    <!-- 图表3 -->
    <el-col :span="6">
      <Card>
        <template #header>
          <div>{{ MockStore.MackObj['//4'] }}</div>
        </template>
        <template #number>
          <div>{{ MockStore.MackObj.usersTotal }}</div>
        </template>
        <template #charts>
          <Drip></Drip>
        </template>
        <template #tip>
          <div>月同比:{{ MockStore.MackObj.userGrowthLastMonth }}&nbsp;&nbsp;日同比:{{ MockStore.MackObj.userGrowthLastDay }}
          </div>
        </template>
      </Card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>

import Card from './card/index.vue'
import Line from './card/line/index.vue'
import Bar from './card/bar/index.vue'
import Drip from './card/drip/index.vue'
// 引入仓库
import UseMockStore from '@/stores/mock';
// 调用小仓库
const MockStore = UseMockStore()
</script>
<script lang="ts">
export default {
  name: 'Top'
}
</script>


<style lang="scss" scoped></style>